import React from 'react';
import { Input, Form, Select, CheckBox, Radio, DatePicker, Button} from 'antd';

const FormItem = Form.Item;
const Option = Select.Option;

class BaseForm extends React.Component {

  submitForm() {
    let formInfo = this.props.form.getFieldsValue();
    this.props.submitForm(formInfo);
  }

  resetForm() {
    this.props.form.resetFields();
  }
  
  initBaseForm() {
    let { getFieldDecorator } = this.props.form;
    let formList = this.props.formList;
    let FormItemList = [];
    if (!!formList&&!!formList.length) {
      formList.forEach((item, index) => {
        if (item.type === 'SELECT') {
          let {label, filter, width, initialValue, list } = item;
          let antSelect = (
            <FormItem label={label} key={index}>
              {
                getFieldDecorator([filter], {
                  initialValue
                })(
                  <Select style={{width}}>
                    {
                      !!list.length&&list.map(item => <Option value={item.key} key={item.key}>{item.name}</Option>)
                    }
                  </Select>
                )
              }
            </FormItem>
          );
          FormItemList.push(antSelect);
        } else if (item.type === 'DatePicker'){
          let { mode, label } = item;
          let antStartDate = (
            <FormItem label={label} key={`${index}_start`}>
              {
                getFieldDecorator('start_time')(
                  <DatePicker
                    showTime={true}
                    placeholder={`${mode==='range'?'开始时间':'请选择'}`}
                    format="YYYY-MM-DD HH:mm:ss"
                  />
                )
              }
            </FormItem>
          );
          FormItemList.push(antStartDate);
          if (mode === 'range') {
            let antEndDate = (
              <FormItem label="~" colon={false} key={`${index}_end`}>
                {
                  getFieldDecorator('end_time')(
                    <DatePicker
                      placeholder='结束时间'
                      showTime={true}
                      format="YYYY-MM-DD HH:mm:ss"
                    />
                  )
                }
              </FormItem>
            );
            FormItemList.push(antEndDate);
          }
        }
      })
    }
    return FormItemList;
  }

  render() {
    return (
      <Form layout="inline">
        { this.initBaseForm() }
        <FormItem>
          <Button
            onClick={() => this.submitForm()}
            type="primary"
            style={{margin:'0 20px'}}
          >查询</Button>
          <Button onClick={() => this.resetForm()}>重置</Button>
        </FormItem>
      </Form>
    )
  }
}

export default Form.create({})(BaseForm);